<template>
  <PageWrapper :title="softwareName + '的简介'">
    <div id="notice">
      <a-card>
        <a-form ref="editRef" :model="editState" :rules="editRules" name="basic" autocomplete="off">
          <a-form-item name="content">
            <a-textarea v-model:value="editState.content" :auto-size="{ minRows: 20 }"></a-textarea> </a-form-item>
        </a-form>
        <!-- <div id="profile">
          <h2>产品简介</h2>
          <h3 class="pname"
            >软件名称：<a-input
              type="text"
              maxlength="8"
              v-model:value="softwareName"
              :bordered="false"
          /></h3>
          <div class="detail">
            <div ref="editRef" class="textarea" contenteditable="true"></div>
          </div>
          <div class="company">汕头市澄海区绿云科技有限公司</div>
        </div> -->
        <a-row class="mt-4">
          <a-col :span="8" :offset="16" style="text-align: right">
            <a-space>
              <!-- <a-button @click="getHtml">修改</a-button> -->
              <a-button type="primary" ghost @click="getHtml">保存</a-button>
              <!-- <a-button type="primary" @click="getHtml">发送</a-button> -->
            </a-space>
          </a-col>
        </a-row>
      </a-card>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
import { PageWrapper } from '/@/components/Page'
import { message, Modal } from 'ant-design-vue'
import { ref, onMounted } from 'vue'
import { saveBlub } from '/@/api/sys/product'
import { getBlurb } from '/@/api/sys/common'
import { useRoute } from 'vue-router'
import type { Rule } from 'ant-design-vue/es/form'
const token = localStorage.getItem('TOKEN_KEY')
const route = useRoute()
const softwareId = route.query.id || 0
const softwareName = route.query.name || ''

async function getProfile() {
  const res = await getBlurb({
    softwareId,
  })
  editState.value.content = res.data.content
}
interface Values {

  content: string
}
const editRef = ref()


const editState = ref<Values>({
  content: ''
})
const editRules: Record<string, Rule[]> = {
  content: [{ required: true, message: '请输入简介' }],
}

// 页面加载时自动执行
onMounted(() => {
  getProfile()
})
async function getHtml() {
  // if (editRef.value && editRef.value.innerHTML) {
  editRef.value
    .validateFields()
    .then(async (values: any) => {
      const res = await saveBlub({
        token,
        data: {
          softwareId,
          content: values.content,
        },
      })
      if (res.success === 1) {
        message.success('成功')
        getProfile()
      } else {
        message.error(res.message)
      }

    })


}
</script>
<style scoped lang="less">
#profile {
  width: 800px;
  margin: auto;
  background-color: #fff;
  border: 1px solid #010101;
  padding: 53px 59px 70px;
  line-height: 27px;
  font-size: 18px;
  color: #000000;
  position: relative;

  h2 {
    color: #4588c0;
    text-align: center;
    font-size: 28px;
  }

  .pname {
    width: 35%;
    padding-left: 8px;
    display: flex;
    align-items: center;
    white-space: nowrap;

    line-height: 48px;
    font-weight: normal;
    font-size: 18px;
    border-bottom: 2px solid rgb(203 231 255);

    input {
      margin-left: 15px;
      color: red;
      line-height: normal;
      // width: 200px;
    }
  }

  .detail {
    background: url(../../../assets/images/bg3.png) repeat;
    line-height: 47px;

    .textarea {
      border: 0;
      outline: none;
      resize: none;
      width: 100%;
      min-height: 768px;
      background: none;
      line-height: 48px;
      font-size: 18px;
    }
  }

  .company {
    position: absolute;
    bottom: 20px;
    left: -2px;
    width: 100%;
    text-align: center;
  }
}
</style>
